<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
		<!-- 这里就是导入我们已经定义好的自定义组件 proto-element -->
		<link rel="import" href="proto-element.html">
		<link rel="import" href="dom-element.html">
		<link rel="import" href="picture-frame.html">
	</head>

	<body>
		<!-- 用标签的形式加载自定义组件-->
		<proto-element></proto-element><br />
		<!-- 2也可以用原生dom操作来动态的加载自定义组件-->
		<script type="text/javascript">
			var ele=document.createElement("proto-element");
			document.getElementsByTagName("body")[0].appendChild(ele);
		</script>
		
		<!--上面这个例子只是将一段text封装成一个组件，在实际使用过程中我们很少会这么干，绝大部分情况下我们封装的最小颗粒都是原生的标签，下面这个例子就对dom进行封装（官网称为local dom）-->
		<dom-element></dom-element>
		<!--Compose with local DOM 这个功能不太好翻译，大概意思就是你可以把一些子组件或者子标签通过标签嵌套的方式插入到父的组件中去，语言可能不太好描述，咱们直接用代码说话-->
		<picture-frame>
			<!--此处就是将一个原生的img标签作为子组件插入到picture-frame中去-->
			<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" style="width: 200px;height: 100px;" />
		</picture-frame>
	</body>

</html>